<template>
  <div class="wh-offline-map">
    <gaode v-if="options.type === 1" ref="map"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
    <tiandi v-else-if="options.type === 2" ref="map"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
    <maptalks
      v-else-if="options.type === 3" ref="map"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
  </div>
</template>

<script>
import gaode from './components/gaode.vue'
import tiandi from './components/tiandi.vue'
import maptalks from './components/maptalks.vue'
export default {
  name: 'wh-map',
  props: {
  },
  data() {
    return {
      /**
       * map 初始化的参数，
       * type 1  高德 2 天地图 3 maptalks
       * loadConfig  地图加载的配置， 包括加载地图的 key， 密钥， 是否离线， 离线地址等
       * mapConfig 地图初始化的配置， 包括中心点， 缩放级别等
      */
      options: {
        type: 0,
        loadConfig: {},
        mapConfig: {}
      }
    }
  },
  components: {
    gaode,
    tiandi,
    maptalks
  },
  mounted() {
  },
  methods: {
    loadMap (options) {
      return new Promise((resolve, reject) => {
        if(!options) {
          console.warn('未配置地图');
          reject('未配置地图')
        } else {
          this.options = options
          this.$nextTick(() => {
            this.$refs.map.loadMap(this.options).then(res => {
              resolve(res)
            })
            // if (options.type === 1) {
            //   this.$refs.map.loadMap(this.options).then(res => {
            //     resolve(res)
            //   })
            // } else if (options.type === 2) {
            //   this.$refs.map.loadMap(this.options).then(res => {
            //     resolve(res)
            //   })
            // } else if (options.type === 3) {
            //   this.$refs.map.loadMap(this.options).then(res => {
            //     resolve(res)
            //   })
            // }
          })
        }

      })
    },
    loadMarker (markerList) {
      this.$nextTick(() => {
        this.$refs.map.loadMarker(markerList)
      })
    },
    loadPolygon (polygonList) {
      this.$nextTick(() => {
        this.$refs.map.loadPolygon(polygonList)
      })
    },
    loadPath (config) {
      this.$nextTick(() => {
        this.$refs.map.loadPath(config)
      })
    },
    onClickMarker (e, data) {
      this.$emit('on-click-marker', e, data)
    },
    onClickPolygon (e, data) {
      this.$emit('on-click-polygon', e, data)
    },
    onClickMap (e) {
       this.$emit('on-click-map', e)
    }
  },
}
</script>

<style scoped>
  .wh-offline-map {
    width: 100%;
    height: 100%;
    min-height: 500px;
  }
</style>
